<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-19 11:02:21
-->
<template>
  <!--1. 容器 -->
  <div ref="Bottom3_container" style="height: 95%"></div>
</template>
<script>
// 2. 导入图表构造函数
import {Line} from '@antv/g2plot';
export default {
  mounted() {
    // 4. 在页面渲染完成后调用图表的渲染
    this.initChart();
  },
  methods:{
    // 3. 初始化图表
    initChart(){
      const data = [
        { time:'10:11', key :'T',value:20 },
        { time:'10:11', key :'V',value:200 },
        { time:'10.12', key :'V',value:140 },
        { time:'10.12', key :'T',value:221 },
        { time:'10.13', key :'V',value:300 },
        { time:'10.13', key :'T',value:250 },
        { time:'10.14', key :'V',value:460 },
        { time:'10.14', key :'T',value:321 },
        { time:'10.15', key :'V',value:500 },
        { time:'10.15', key :'T',value:391 },
];
const line = new Line(this.$refs.Bottom3_container, {
  data,
  xField: 'time',
  yField: 'value',
  legend: false,
  seriesField: 'key',
  stepType: 'hvh',
});

line.render();
    }
  }
}
</script>